O'zbek

Mustahkam va turi xavfsiz holat mashinalarini yaratish uchun kuchli vosita bo'lgan TypeScript diskriminatsiyalangan birlashmalarini o'rganing. Holatlarni aniqlash, o'tishlarni boshqarish va kod ishonchliligini oshirish uchun TypeScriptning tur tizimidan foydalanishni o'rganing.

TypeScript Diskriminatsiyalangan Birlashmalari: Turi Xavfsiz Holat Mashinalarini Yaratish

Dasturiy ta'minotni ishlab chiqish sohasida ilovaning holatini samarali boshqarish hal qiluvchi ahamiyatga ega. Holat mashinalari murakkab holatli tizimlarni modellashtirish uchun kuchli abstraksiyani ta'minlaydi, bu esa tizimning mantiqi haqida oldindan aytib bo'ladigan xatti-harakatlarni va soddalashtirilgan mulohazalarni ta'minlaydi. TypeScript o'zining mustahkam tur tizimi bilan diskriminatsiyalangan birlashmalar (shuningdek, teglangan birlashmalar yoki algebraik ma'lumotlar turlari deb ham ataladi) yordamida turi xavfsiz holat mashinalarini yaratish uchun ajoyib mexanizmni taklif etadi.

Diskriminatsiyalangan Birlashmalar Nima?

Diskriminatsiyalangan birlashma bu bir nechta turli tiplardan biri bo'lishi mumkin bo'lgan qiymatni ifodalovchi tipdir. Ushbu tiplarning har biri, birlashma a'zolari deb nomlanadi, diskriminant yoki teg deb ataladigan umumiy, alohida xususiyatga ega. Bu diskriminant TypeScriptga birlashmaning qaysi a'zosi hozirda faol ekanligini aniq belgilashga imkon beradi, bu esa kuchli tur tekshiruvi va avtomatik to'ldirishni ta'minlaydi.

Buni svetofor kabi tasavvur qiling. U uchta holatdan birida bo'lishi mumkin: Qizil, Sariq yoki Yashil. 'rang' xususiyati diskriminant vazifasini bajaradi va bizga svetofor aynan qaysi holatda ekanligini aytib beradi.

Nima uchun Holat Mashinalari uchun Diskriminatsiyalangan Birlashmalardan Foydalanish Kerak?

Diskriminatsiyalangan birlashmalar TypeScriptda holat mashinalarini yaratishda bir qancha asosiy afzalliklarni beradi:

Diskriminatsiyalangan Birlashmalar bilan Holat Mashinasini Aniqlash

Keling, diskriminatsiyalangan birlashmalardan foydalanib, holat mashinasini qanday aniqlashni amaliy misolda ko'rib chiqamiz: buyurtmalarni qayta ishlash tizimi. Buyurtma quyidagi holatlarda bo'lishi mumkin: Kutilmoqda, Qayta ishlanmoqda, Jo'natilgan va Yetkazib berilgan.

1-qadam: Holat Turlarini Aniqlash

Avval har bir holat uchun alohida turlarni aniqlaymiz. Har bir turda diskriminant vazifasini bajaruvchi `type` xususiyati va holatga xos bo'lgan har qanday ma'lumotlar bo'ladi.


interface Pending {
  type: "pending";
  orderId: string;
  customerName: string;
  items: string[];
}

interface Processing {
  type: "processing";
  orderId: string;
  assignedAgent: string;
}

interface Shipped {
  type: "shipped";
  orderId: string;
  trackingNumber: string;
}

interface Delivered {
  type: "delivered";
  orderId: string;
  deliveryDate: Date;
}

2-qadam: Diskriminatsiyalangan Birlashma Turini Yaratish

Keyin, bu alohida turlarni `|` (birlashma) operatori yordamida birlashtirib, diskriminatsiyalangan birlashmani yaratamiz.


type OrderState = Pending | Processing | Shipped | Delivered;

Endi `OrderState` `Pending`, `Processing`, `Shipped` yoki `Delivered` bo'lishi mumkin bo'lgan qiymatni ifodalaydi. Har bir holatdagi `type` xususiyati diskriminant vazifasini bajaradi, bu esa TypeScriptga ular orasidagi farqni aniqlash imkonini beradi.

Holat Oʻtishlarini Boshqarish

Holat mashinamizni aniqlab olganimizdan so'ng, holatlar o'rtasida o'tish mexanizmi kerak bo'ladi. Keling, joriy holat va amalni kirish sifatida qabul qilib, yangi holatni qaytaradigan `processOrder` funksiyasini yarataylik.


interface Action {
  type: string;
  payload?: any;
}

function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    case "pending":
      if (action.type === "startProcessing") {
        return {
          type: "processing",
          orderId: state.orderId,
          assignedAgent: action.payload.agentId,
        };
      }
      return state; // Holat o'zgarmaydi

    case "processing":
      if (action.type === "shipOrder") {
        return {
          type: "shipped",
          orderId: state.orderId,
          trackingNumber: action.payload.trackingNumber,
        };
      }
      return state; // Holat o'zgarmaydi

    case "shipped":
      if (action.type === "deliverOrder") {
        return {
          type: "delivered",
          orderId: state.orderId,
          deliveryDate: new Date(),
        };
      }
      return state; // Holat o'zgarmaydi

    case "delivered":
      // Buyurtma allaqachon yetkazib berilgan, keyingi amallar yo'q
      return state;

    default:
      // Bu to'liqlikni tekshirish tufayli hech qachon sodir bo'lmasligi kerak
      return state; // Yoki xatolik chiqarish
  }
}

Tushuntirish

Toʻliqlikni tekshirishdan foydalanish

TypeScriptning to'liqlikni tekshirishi - bu holat mashinangizda barcha mumkin bo'lgan holatlarni qamrab olganingizni ta'minlaydigan kuchli xususiyatdir. Agar `OrderState` birlashmasiga yangi holat qo'shsangiz-u, `processOrder` funksiyasini yangilashni unutsangiz, TypeScript xatolikni belgilaydi.

Toʻliqlikni tekshirishni yoqish uchun `never` turidan foydalanishingiz mumkin. switch iborasining `default` holatida, holatni `never` turidagi o'zgaruvchiga tayinlang.


function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    // ... (oldingi holatlar) ...

    default:
      const _exhaustiveCheck: never = state;
      return _exhaustiveCheck; // Yoki xatolik chiqarish
  }
}

Agar `switch` iborasi barcha mumkin bo'lgan `OrderState` qiymatlarini qamrab olsa, `_exhaustiveCheck` o'zgaruvchisi `never` turida bo'ladi va kod kompilyatsiya qilinadi. Biroq, `OrderState` birlashmasiga yangi holat qo'shib, uni `switch` iborasida qamrab olishni unutsangiz, `_exhaustiveCheck` o'zgaruvchisi boshqa turda bo'ladi va TypeScript kompilyatsiya vaqtida xatolik chiqarib, sizni o'tkazib yuborilgan holat haqida ogohlantiradi.

Amaliy misollar va qo'llanmalar

Diskriminatsiyalangan birlashmalar oddiy buyurtmalarni qayta ishlash tizimlaridan tashqari keng ko'lamdagi stsenariylarda qo'llaniladi:

Misol: UI holatini boshqarish

Keling, APIdan ma'lumotlarni oladigan UI komponentining holatini boshqarishning oddiy misolini ko'rib chiqaylik. Biz quyidagi holatlarni aniqlashimiz mumkin:


interface Initial {
  type: "initial";
}

interface Loading {
  type: "loading";
}

interface Success {
  type: "success";
  data: T;
}

interface Error {
  type: "error";
  message: string;
}

type UIState = Initial | Loading | Success | Error;

function renderUI(state: UIState): React.ReactNode {
  switch (state.type) {
    case "initial":
      return 

Ma'lumotlarni yuklash uchun tugmani bosing.

; case "loading": return

Yuklanmoqda...

; case "success": return
{JSON.stringify(state.data, null, 2)}
; case "error": return

Xatolik: {state.message}

; default: const _exhaustiveCheck: never = state; return _exhaustiveCheck; } }

Bu misol, diskriminatsiyalangan birlashmalardan UI komponentining turli holatlarini samarali boshqarish uchun qanday foydalanish mumkinligini ko'rsatadi, bu esa UI ning joriy holatga qarab to'g'ri ko'rsatilishini ta'minlaydi. `renderUI` funksiyasi har bir holatni mos ravishda boshqaradi, bu esa UIni boshqarishning aniq va tur xavfsiz usulini ta'minlaydi.

Diskriminatsiyalangan Birlashmalardan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

TypeScript loyihalaringizda diskriminatsiyalangan birlashmalardan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

Ilg'or Texnikalar

Shartli Turlar

Shartli turlarni diskriminatsiyalangan birlashmalar bilan birlashtirib, yanada kuchliroq va moslashuvchan holat mashinalarini yaratish mumkin. Masalan, joriy holatga qarab funksiya uchun turli qaytarish turlarini aniqlash uchun shartli turlardan foydalanishingiz mumkin.


function getData(state: UIState): T | undefined {
  if (state.type === "success") {
    return state.data;
  }
  return undefined;
}

Bu funksiya oddiy `if` iborasidan foydalanadi, lekin ma'lum bir turni doimo qaytarishini ta'minlash uchun shartli turlar yordamida yanada mustahkamroq qilish mumkin.

Yordamchi Turlar

TypeScriptning `Extract` va `Omit` kabi yordamchi turlari diskriminatsiyalangan birlashmalar bilan ishlashda foydali bo'lishi mumkin. `Extract` sizga shart asosida birlashma turidan ma'lum a'zolarni ajratib olishga imkon beradi, `Omit` esa turdan xususiyatlarni olib tashlashga imkon beradi.


// UIState birlashmasidan "success" holatini ajratib olish
type SuccessState = Extract, { type: "success" }>;

// Error interfeysidan 'message' xususiyatini olib tashlash
type ErrorWithoutMessage = Omit;

Turli Sanoatlardagi Haqiqiy Hayot Misollari

Diskriminatsiyalangan birlashmalarning kuchi turli sohalar va dasturiy ilovalar bo'ylab kengayadi:

Xulosa

TypeScript diskriminatsiyalangan birlashmalari holat mashinalarini yaratishning kuchli va tur xavfsiz usulini taqdim etadi. Mumkin bo'lgan holatlar va o'tishlarni aniq belgilab, siz yanada mustahkam, saqlanuvchan va tushunarli kod yaratishingiz mumkin. Tur xavfsizligi, to'liqlikni tekshirish va kengaytirilgan kodni to'ldirishning birikmasi diskriminatsiyalangan birlashmalarni murakkab holat boshqaruvi bilan shug'ullanadigan har qanday TypeScript dasturchisi uchun bebaho vositaga aylantiradi. Keyingi loyihangizda diskriminatsiyalangan birlashmalarni qo'llang va tur xavfsiz holat boshqaruvining afzalliklarini o'zingiz his qiling. Elektron tijoratdan sog'liqni saqlashgacha, logistikadan ta'limgacha bo'lgan turli misollar bilan ko'rsatganimizdek, diskriminatsiyalangan birlashmalar orqali tur xavfsiz holat boshqaruvi printsipi universal qo'llaniladi.

Siz oddiy UI komponentini yoki murakkab korporativ ilovani yaratayotgan bo'lsangiz ham, diskriminatsiyalangan birlashmalar sizga holatni samaraliroq boshqarishga va ish vaqtidagi xatolar xavfini kamaytirishga yordam beradi. Shunday qilib, TypeScript bilan tur xavfsiz holat mashinalari dunyosiga sho'ng'ing va o'rganing!

TypeScript Diskriminatsiyalangan Birlashmalari: Turi Xavfsiz Holat Mashinalarini Yaratish | MLOG